<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*标签选择器:根据标签名找到对应的标签来设置样式*/
        div{
            color: red;
        }
        p{
            color: blue;
        }
        /*类选择器*/
        .one{
           color: yellow;
        }
        /*id选择器*/
        #test1{
            font-size: 30px;
        }
        /*符合选择器*/
        div.two{
           font-size: 100px;
           background-color: blue;
        }
        /*伪类*/
        div.two:hover{
           background-color: green;
           cursor: crosshair;
        }

        /*后代选择器*/
        /*div{*/
            /*color: blue;*/
        /*}*/


         input:focus{
            outline: none;
            border: 1px solid yellow;
         }
    </style>
</head>
<body>
   <div id="test1">11111111111111</div>
   <div>11111111111111</div>
   <div>11111111111111</div>
   <p>222222222222222</p>

   <div class="one">3333333333333</div>
   <p class="one">4444444444444</p>

   <div class="two">66666666</div>

   <div>
       <p>12122121</p>
       <span>
           <p>ewerfer</p>
       </span>
   </div>

   <input>
</body>
</html>